import React, { useState } from "react";
import { AppPopup, AppPopupRemove } from "../../layout/popup";
import http from "../../../lib/ajax";

function Choose(props) {
  const bindTap = e => {
    // console.log(e.currentTarget.dataset.name);
    const name = e.currentTarget.dataset.name;
    if (name === "选择驾校") {
      setclasse({});
      setteacher({});
      setClassList([]);
      props.setuserChoose(null);
      AppPopup(<List list={schoolList} setFunc={setschool} />);
    } else if (name === "选择课程") {
      props.setuserChoose(null);
      setteacher({});
      loadClass(classList, setClassList, setclasse, school);
    } else if (name === "选择老师") {
      props.setuserChoose(null);
      chooseTeacher(teacher, setteacher, classList, classe, props.setuserChoose);
    }
  };
  const [schoolList, setschoolList] = useState([]);
  const [school, setschool] = useState({});
  const [classList, setClassList] = useState([]);
  const [classe, setclasse] = useState({});
  const [teacher, setteacher] = useState({});
  loadSchool(schoolList, setschoolList);
  return (
    <div className="input-body">
      <div className="box">
        <div className="input-block" onClick={bindTap} data-name="选择驾校">
          <div className="tag">选择驾校</div>
          <div className="choosed">{school.areaName}</div>
        </div>
        <div className="input-block" onClick={bindTap} data-name="选择课程">
          <div className="tag">选择课程</div>
          <div className="choosed">{classe.name}</div>
        </div>
        <div className="input-block" onClick={bindTap} data-name="选择老师">
          <div className="tag">选择老师</div>
          <div className="choosed">{teacher.teacherName}</div>
        </div>
        <div className="input-block">
          <div className="tag">客户电话</div>
          <input type="text" maxLength="11" placeholder="输入客户微信绑定手机号" className="input-text-block" id="regPhoneNumber" />
        </div>
        <div className="input-block">
          <div className="tag">客户名字</div>
          <input type="text" maxLength="11" placeholder="输入客户真实姓名" className="input-text-block" id="cName" />
        </div>
      </div>
    </div>
  );
}

function loadSchool(schoolList, setschoolList) {
  if (schoolList.length < 1) {
    http('get','student/index/listSchool',{
      latitude: 22.83393,
      longitude: 108.31343,
    },null,false)
    .then( d => {
      // console.log(d);
      if (d.data.code == 0) {
        setschoolList(d.data.data);
      }
    })
    .catch( e => console.warn(e));   
  }
}

function loadClass(classList, setClassList, setclasse, school) {
  if (!school || !school.areaId) {
    return;
  }
  if (classList.length < 1) {
    http('get','student/index/listTeacherClassesListVo',{ schoolAreaId:school.areaId },null,false)
    .then(d => {
      // console.log(d);
      if (d.data.code == 0) {
        setClassList(d.data.data);
        let _list = [];
        for (let i of d.data.data) {
          if (_list.indexOf(i.classesName) < 0) {
            _list.push(i.classesName);
          }
        }
        let _listName = [];
        for (let i of _list) {
          _listName.push({ name: i });
        }
        AppPopup(<List list={_listName} setFunc={setclasse} />);
      }
    })
    .catch(e => console.warn(e));   
  } else {
    let _list = [];
    for (let i of classList) {
      if (_list.indexOf(i.classesName) < 0) {
        _list.push(i.classesName);
      }
    }
    let _listName = [];
    for (let i of _list) {
      _listName.push({ name: i });
    }
    AppPopup(<List list={_listName} setFunc={setclasse} />);
  }
}

function chooseTeacher(teacher, setteacher, classList, classe, setuserChoose) {
  if (!classList || classList.length < 1) {
    return;
  }
  //   console.log(classList, classe);
  let list = [];
  for (let i of classList) {
    if (i.classesName === classe.name) {
      list.push(i);
    }
  }
  //   console.log(list);
  AppPopup(<List list={list} setFunc={setteacher} last={true} setuserChoose={setuserChoose} teacher={teacher} classe={classe} />);
}

function List(props) {
  const takeSchool = el => {
    props.setFunc(el);
    AppPopupRemove();
    if (props.last) {
      // 如果是选择老师，则提交目前的选择信息
      props.setuserChoose({
        class: props.classe,
        teacher: el
      });
    }
  };
  const list = props.list.map((el, index) => (
    <div key={index} className="register-popus-item" onClick={takeSchool.bind(null, el)}>
      {el.name ? el.name : el.teacherName ? el.teacherName : ""}
    </div>
  ));
  return (
    <div className="register-popus">
      <div className="register-popus-wrap">{list}</div>
    </div>
  );
}

export { Choose };
